# !/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
===========================
@Time : 2022/8/25 0025 22:18
@Author : 测试开发工程师
@File : 9. Vuetify 页面布局.py
@Software: PyCharm
============================
"""

"""
什么是页面布局
    对页面的文字，图形或表格进行格式设置
    头部区域
    菜单导航区域
    内容区域
    底部区域


使用应用程序布局
    UI 组件地址： https://vuetifyjs.com/zh-Hans/components/application/
    标签作用
        v-system-bar：总是放在应用顶部，优先级高于 v-app-bar。
        v-app-bar : 放在应用顶部
        v-navigation-drawer: 可以放置在应用的左边或右边，并且可以配置在 v-app-bar 的旁边或下面
        v-bottom-navigation：总是放在应用底部，优先级高于 v-footer
        v-footer: 放在应用底部


基本布局
    v-app : 应用程序的根节点
    v-main: 正文内容区域
    

<template>
  <v-app>
    顶部栏，必须加上 app 属性
    <v-app-bar app></v-app-bar>
    <!-- 正文内容 -->
    <v-main>
      <v-container>Hello World!</v-container>
    </v-main>
  </v-app>
</template>


"""
